<template>
    <section>
        <DetailsHeader title="提交工单" class="mb-24" />
        <div class="page-card">
            <a-form :label-col="{
                style: {
                    width: '150px',
                }
            }" :model="form" ref="formRef">
                <div class="card-content">
                    <a-row :gutter="24">
                        <a-col :span="12">
                            <a-form-item label="问题类型" name="questionType"
                                :rules="[{ required: true, message: '请选择你的问题类型' }]">
                                <a-select ref="select" v-model:value="form.questionType" placeholder="请选择你的问题类型" allowClear>
                                    <a-select-option value="实例">实例</a-select-option>
                                    <a-select-option value="数据存储">数据存储</a-select-option>
                                    <a-select-option value="镜像">镜像</a-select-option>
                                    <a-select-option value="账户费用">账户费用</a-select-option>
                                    <a-select-option value="其他">其他</a-select-option>
                                </a-select>
                            </a-form-item>

                            <a-form-item label="问题描述" name="questionDesc" :rules="[{ required: true, message: '请输入问题描述' }]">
                                <a-textarea v-model:value="form.questionDesc" :auto-size="{ minRows: 2, maxRows: 5 }"
                                    placeholder="请输入问题描述" maxlength="1000" />
                            </a-form-item>

                            <a-form-item label="截图">
                                <a-upload v-model:file-list="fileList" name="file" list-type="picture-card"
                                    :headers="headers" class="avatar-uploader" :action="uploadImgUrl"
                                    @change="handleChange">
                                    <div>
                                        <plus-outlined></plus-outlined>
                                        <div class="ant-upload-text">请上传截图</div>
                                    </div>
                                </a-upload>
                                <span style="color: #FAAD14;"><info-circle-filled
                                        style="margin-right: 5px;" />如有相关报错等，请尽量上传截图，这将加快工程师的处理速度。</span>
                            </a-form-item>

                            <a-form-item label="实例ID" name="instanceId">
                                <a-input v-model:value="form.instanceId" maxlength="200" placeholder="如果有多个实例，请用逗号隔开" />
                            </a-form-item>

                            <a-form-item label="联系方式" name="contactType" :rules="[{ required: true, message: '请选择联系方式' }]">
                                <a-radio-group v-model:value="form.contactType" name="radioGroup">
                                    <a-radio value="weChat">微信</a-radio>
                                    <a-radio value="phone">手机号</a-radio>
                                </a-radio-group>
                            </a-form-item>

                            <a-form-item label="微信/手机号" name="contact" :rules="[{ required: true, message: '请输入微信或手机号' }]">
                                <a-input v-model:value="form.contact" maxlength="20" placeholder="请输入微信或手机号" />
                            </a-form-item>
                        </a-col>
                    </a-row>
                </div>
            </a-form>
        </div>

        <div class="page-bottom">
            <a-button type="primary" @click="nextStep" style="display:flex;align-item:center;"><svg-icon name="icon_release"
                    style="width:20px;height:20px;margin-right: 8px;color: #ffffff;" />提交</a-button>
        </div>
    </section>
</template>

<script setup name="Account">
import DetailsHeader from '@/components/common/DetailsHeader.vue'
import { reactive, ref } from 'vue'
import {
    InfoCircleFilled,
    PlusOutlined
} from '@ant-design/icons-vue';
import { ZyNotification, XsyMessage } from '@/libs/util.toast'
import { useRouter, useRoute } from 'vue-router'
import { uploadImgUrl } from '@/api/server.js'
import { addWorkOrder } from 'api/modules/api.workOrder'
import dbUtils from "libs/util.strotage";
const router = useRouter()
const route = useRoute();

const form = ref({})
const issueType = route.query.issueType
form.value.questionType = issueType

const formRef = ref()
const nextStep = () => {
    const screenshot = fileList.value.map(item => {
        return item.response.data.url
    })

    const screenshotStr = encodeURI(screenshot.join(','))
    formRef.value.validateFields().then(() => {
        const params = {
            ...form.value,
            screenshot: screenshotStr
        }
        addWorkOrder(params).then(res => {
            if (res.code == 0) {
                ZyNotification.success(res.message || '提交成功')
                router.push('/workOrder')
            }
        })
    })
}

// 上传图片
const fileList = ref([])
const headers = {
    'gm-session-id': dbUtils.get('token')
}

const handleChange = ({
    file,
    fileList,
}) => {
    if (file.status === 'error') {
        ZyNotification.error(file.response.message || '上传失败')
    }
    if (file.status === 'done') {
        form.value.fileList =  fileList
    }
};

</script>

<style scoped lang="less">
.page-card {
    padding: 24px;
    background: #ffffff;
    box-shadow: 0px 4px 4px 0px #E7EDF8;
    margin-bottom: 24px;

    .form-item-code {
        position: relative;
        border-radius: 6px;

        .get-code-btn {
            position: absolute;
            right: 0;
            border-radius: 6px;
            border: none;
            font-size: 14px;
            z-index: 100;
        }
    }
}

.page-bottom {
    position: fixed;
    bottom: 0;
    background: #ffffff;
    border-radius: 2px;
    box-shadow: 0px 0px 10px 0px rgba(155, 174, 201, 0.40);
    width: calc(100% - 220px);
    min-height: 90px;
    padding: 24px;
    display: flex;
    justify-content: end;
    align-items: center;

    .tips {
        color: #FAAD14;
        font-family: PingFang SC;
        font-size: 12px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        margin-right: 16px;
    }
}

.avatar-uploader>.ant-upload {
    width: 128px;
    height: 128px;
}

.ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
}

.ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
}
</style>
